<template>
  <article>
    <h1 class="t_nav">
      <span>不要轻易放弃。学习成长的路上，我们长路漫漫，只因学无止境。</span>
      <span class="localtion">您的位置 &lt;&lt; 列表</span>
    </h1>
    <div class="blogs">
      <div class="mt20"></div>
      <li v-for="(item,index) in articleList" :key="index">
        <span class="blogpic">
          <router-link :to="{name:'_detail',query:{articleId:item.id}}">
            <img src="/static/images/text02.jpg" />
          </router-link>
        </span>
        <h3 class="blogtitle">
          <router-link :to="{name:'_detail',query:{articleId:item.id}}">{{item.title}}</router-link>
        </h3>
        <div class="bloginfo">
          <p>{{item.brief}},...</p>
        </div>
        <div class="autor">
          <span class="lm">
            <a
              href="/"
              title="CSS3|Html5"
              target="_blank"
              class="classname"
            >{{item.tag.tagsName}}</a>
          </span>
          <span class="dtime">{{item.publishDate}}</span>
          <span class="viewnum">
            浏览（
            <a href="/">{{item.views}}</a>）
          </span>
          <span class="readmore">
            <router-link :to="{name:'_detail',query:{articleId:item.id}}">阅读原文</router-link>
          </span>
        </div>
      </li>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <Sidebar />
  </article>
</template>

<script>
import Sidebar from "../sidebar";
export default {
  data() {
    return {
      articleList: [],
      page: 1,
      pageSizes: [10, 30, 50, 80],
      pageSize: 30,
      total: 100
    };
  },
  components: {
    Sidebar
  },
  created() {
    // 头部组件
    this.$store.commit("increment", false);
    // 根据分类查找列表内容
    this.getArtilceByTagId();
  },
  watch: {
    '$route': "getArtilceByTagId"
  },
  methods: {
    getArtilceByTagId() {
      let id = this.$route.query.tagId;
      // 根据类型查找文章
      this.$http({
        url: this.$http.adornUrl(`/api/article/${id}/list`),
        method: "GET",
        params: this.$http.adornParams(this.page, this.pageSize)
      }).then(({ data }) => {
        this.total = parseInt(data.data.totalElements);
        this.articleList = data.data.content;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getArtilceByTagId();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getArtilceByTagId();
    }
  }
};
</script>

<style lang="scss">
  
.t_nav .localtion {
  float: left;
  padding-left: 8px;
  font-weight: 400;
}
.el-pagination {
  text-align: center;
}
</style>


